<template>
  <h1>{{ sum }}</h1>
  <button @click="sum++">点击加1</button>
  <!-- 点击这个，数据发生改变 触发beforeUpdate updated -->
</template>
  
<script>
import { ref } from "vue";

export default {
  name: "Demo",

  setup() {
    let sum = ref(0);

    return {
      sum,
    };
  },

  //通过配置项的写法使用挂载周期
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
  },
  //没有这两个函数了
/*   beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }, */
  beforeUnmount(){
    console.log('beforeUnmount');
  },
  unmounted(){
    console.log('unmounted');
  }
};
</script>
  
  <style>
</style>
  